<template>
  <el-card shadow="hover" style="height: 100%;" :body-style="{height:'100%'}">
    <template #header>
      <nav class="flex justify-between">
        <el-button @click="exportPdf" type="primary">导出pdf</el-button>
        <el-link type="primary" target="_blank" href="https://www.npmjs.com/package/jspdf">npm地址</el-link>
      </nav>
    </template>


    <div class="jspdf">
      测试
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { jsPDF } from "jspdf";
import {toPDF} from "@/utils/toPdf";



const exportPdf = () => {

  setTimeout(() => toPDF('.jspdf'),3000)

// 创建一个新的PDF文档实例
  const doc = new jsPDF({
    unit: "mm", // 单位，本示例为mm
    format: "a4", // 页面大小
    orientation: "portrait", // 页面方向，portrait: 纵向，landscape: 横向
    putOnlyUsedFonts: true, // 只包含使用的字体
    compress: true, // 压缩文档
    precision: 16, // 浮点数的精度
  });

  // 添加第一页内容
  doc.text('Page 1 - Hello, World!', 10, 10);// 定义页面边距
// 添加第二页内容
  doc.addPage();
  doc.text("Page 2 - Hello, World2!", 10, 10);
// 保存PDF文件
  doc.save("example.pdf");
}
</script>

<style scoped lang="less">

</style>
